<template>
	<view class="page">
		<uni-navbar :msg="msg" class="nav"></uni-navbar>
		<uni-content :message="message"></uni-content>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	
	export default {
		data() {
			return {
				firstNum: [],
				lastNum: [],
				symbol: '÷',
				result: [],
				message: [],
				msg: 10
			}
		},
		onLoad() {
			this.change()
		},
		computed: {
		  ...mapGetters(['getterDigit'])
		},
		watch: {
		  getterDigit(message) {
		    this.change()
		  }
		},
		methods: {
			change() {
				this.firstNum = []
				this.lastNum = []
				this.result = []
				for (let i = 0; i < 10; i++) {
				    let num = 0
				    let res = 0
				    num = Math.floor(Math.random() * (this.$store.state.digit - 1)) + 1
				    this.lastNum[i] = Math.floor(Math.random() * (this.$store.state.digit - 1)) + 1
				    res = num * this.lastNum[i]
				    this.firstNum[i] = res
				    this.result[i] = num
				}
				this.message = []
				for( let i = 0; i < 10; i++) {
					const obj = {};
					obj.id = i;
					obj.firstNum = this.firstNum[i]
					obj.lastNum = this.lastNum[i]
					obj.result = this.result[i]
					obj.symbol = this.symbol
					this.message.push(obj)
				}
				this.msg = this.$store.state.digit
			}
		}
	}
</script>

<style>
	.nav {
		position: absolute;
		top: 0;
		left: 0;
	}
</style>
